<template>
    <BaseDialog ref="baseDialog" width="70%" title="地图选点" @confrim="confrim">
        <GmapAutocomplete @place_changed="setPlace" placeholder="请输入地址进行搜索" />
        <GmapMap :center="center" :zoom="15" style="width: 100%; height: 600px" @click="handleMapClick">
            <GmapMarker v-for="(m, index) in markers" :key="index" :position="m.position" :clickable="true"
                :draggable="true" @click="center = m.position" />
        </GmapMap>
    </BaseDialog>
</template>


<script>
export default {
    data() {
        return {
            place: null, // 搜索框选择的地点
            center: { lat: 37.7749, lng: -122.4194 }, // 初始化地图中心位置
            markers: [], // 标记列表
            dot:null
        }
    },
    methods: {
        setPlace(place) {
            this.place = place;
            if (this.place) {
                this.center = {
                    lat: this.place.geometry.location.lat(),
                    lng: this.place.geometry.location.lng(),
                };
                this.markers = [
                    {
                        position: {
                            lat: this.place.geometry.location.lat(),
                            lng: this.place.geometry.location.lng(),
                        },
                    },
                ];
            }
        },
        handleMapClick(event) {
            this.markers = [{ position: event.latLng.toJSON() }] // 更新标记位置
            console.log('点击的经纬度：', event.latLng.toJSON()) // 输出经纬度
           this.dot = event.latLng.toJSON()

        },
        open() {
            this.$refs.baseDialog.open()
        },
        confrim() {
            this.$emit('confrim',this.dot)
            this.close()
        },
        close() {
            this.$refs.baseDialog.close()
        }
    }
}
</script>